<!--
 * @Descripttion: 
 * @version: 
 * @@Company: DCIT-SH
 * @Author: 王富银
 * @Date: 2024-08-08 15:37:49
 * @LastEditors: Sunny Chen
 * @LastEditTime: 2024-08-13 09:04:17
-->

<template>
  <div id="map" ref="mapContainer"></div>
  <!-- <button @click="create">创建轨迹</button> -->
  <FaultInput v-if="isShowFalutInput" :selectCarOfFault="selectCarOfFault" @close="handleClose"></FaultInput>
</template>

<script setup>
import { onMounted, markRaw, ref,watch} from "vue";
import {storeToRefs} from 'pinia'
import FaultInput from "@/components/FaultInput.vue";
import { initMap ,createMarker,createDarw} from "@/utils";
import { useMapStore,usePostStore } from "@/stores";
import { getCars } from "@/api/api";
const mapStroe = useMapStore();
const mapContainer = ref();
const draw = createDarw();
const postStore = usePostStore();
const {updateSelectCarOfFault} = postStore;
const {selectCarOfFault} = storeToRefs(postStore);
const isShowFalutInput = ref(false);
let map;
onMounted(async () => {
  mapContainer.value.style.width = window.innerWidth + "px";
  mapContainer.value.style.height = window.innerHeight * 0.94 + "px";
  //加载电动车的数据
  map = await initMap(mapStroe.Controls,"map");
  const data = await getCars({});
  const markers = createMarker(map,data);
  mapStroe.setMap(markRaw(map));
  mapStroe.setMarkers(markRaw(markers));
  mapStroe.setDraw(markRaw(draw));
});

//监听当前的选中故障车
const unwatch = watch(selectCarOfFault,()=>{
  if(selectCarOfFault.value){
    isShowFalutInput.value = true;
  }
})
const create = ()=>{
  if(map.hasControl(draw)){
    map.off("draw.create");
    map.removeControl(draw);
  }
  map.addControl(draw);
  draw.changeMode("draw_line_string");
  map.on("draw.create",(e)=>{
    console.log(JSON.stringify(e.features[0].geometry.coordinates));
    draw.deleteAll();
  })
}
const handleClose = ()=>{
  updateSelectCarOfFault(null);
  isShowFalutInput.value = false;
}
</script>

<style scoped>
 button{
  position: absolute;
  top: 100px;
  left: 40px;
  z-index: 10;
 }
</style>
